<template>
  <div ref="scrollRef" @scroll="handleScroll" v-if="modelValue" class="dialog-overlay scrollbar-class" @click="handleOverlayClick">
    <div class="dialog" :style="{ width: props.width }">
      <div class="header">
        <slot name="header"></slot>
      </div>
      <slot></slot>
      <!-- 插槽用于放置弹框内容 -->
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  width: {
    type: String,
    default: "500px",
  },
});
const scrollRef = ref(null);
const emits = defineEmits(["update:modelValue", "scrollTobottom"]);

const closeDialog = () => {
  emits("update:modelValue", false);
};

const handleOverlayClick = (event) => {
  // 阻止点击弹框内部时关闭弹框
  if (
    event.target.classList.contains("dialog-overlay") &&
    !event.target.closest(".dialog")
  ) {
    closeDialog();
  }
};
const handleScroll = () => {
    const { scrollTop, scrollHeight, clientHeight } = scrollRef.value;  
  // 滚动到底部的条件  
  if (scrollTop + clientHeight >= scrollHeight) {
    emits("scrollTobottom")
  } 
}
</script>

<style scoped lang="scss">
/* 样式与之前相同 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: overlay;
  z-index: 20;
  background: rgba(0, 0, 0, 0.5);
}

.dialog {
  background: #eeeef0;
  box-shadow: 3px 6px 12px 1px rgba(8, 52, 128, 0.08);
  border-radius: 12px;
  margin: 200px auto;
  padding: 24px;
  box-sizing: border-box;
  .header{
    padding-bottom: 20px;
  }
}

.close-btn {
  /* ... */
}
</style>
